
import Vue from 'vue'
import Vuex from 'vuex'

// 使用 use 安装一下
Vue.use(Vuex)

// 提出 state
const state = {
  list: [
    { id: 1, name: '吃饭', done: true },
    { id: 2, name: '睡觉', done: true },
    { id: 3, name: '打豆', done: false }
  ],
}
// 提出 mutations 
const mutations = {
  // 删除
  del(state,payload){
    //1. 拿到 id
    let id = payload.id
    //2. 删除 filter 
    state.list = state.list.filter(v => v.id != id)
  },
  // 添加
  add(state,payload){

      //1. 拿到参数
      let { todoName } = payload
      //2. 添加到list
      state.list.unshift({
        id : Date.now(),  // +new Date()
        name:todoName,
        done : false
      })

  },
  // 编辑
  edit(state,payload) {
    //1. 解构
    const {id,name} = payload
    //2. 根据id 找到对应的任务(todo)
    let todo = state.list.find(v => v.id == id)
    //3. 修改最新值
    todo.name = name
  },
  // 清除
  clear(state){
    state.list = state.list.filter(v => !v.done)
  }
}

// 提出 getters
const getters =  {

    // 底部的显示与隐藏
    isFooterShow(state){
      return state.list.length>0
    },
    // 剩余未完成数
    itemLeftCount(state){
      return state.list.filter(v => !v.done).length
    },
    // clear completed 显示和隐藏
    isClearCompletedShow(state){
      // some 就是判断是否有一个以上的元素满足条件 (是否完成)
      // 只要有一个以上的完成 true , 
      return state.list.some(v => v.done)
    }
}

// actions
const actions = {
  // 异步的添加
  // context 类似 store
  addAsync(context,payload){
    setTimeout(() => {
      
      // 提交mutation 不是直接变更/修改数据
      context.commit('add',payload)

    }, 1000);
  }
}

// 创建 store
const store = new Vuex.Store({
  // 状态数据
  state,
  mutations,
  getters,
  actions
})

// 导出
export default store